<template>
    <div class="main">
        <pageHeader></pageHeader>

        <div class="body">
            <div class="container">
                <ul class="articles">
                    <li class="article" v-for="a in articleList" :key="a.id">
                        <h2
                            @click="aClick(a)"
                            class="title"
                            v-text="a.title"
                        ></h2>
                        <p class="summary" v-text="a.summary"></p>

                        <p class="info">
                            <!-- <span v-text="a.author.id"></span> -->
                            <span v-text="a.author.username"></span>
                            <span v-text="a.addTime"></span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <pageFooter></pageFooter>
    </div>
</template>

<script>
import pageHeader from "@/components/commons/pageHeader";
import pageFooter from "@/components/commons/pageFooter";
export default {
    props: [],
    components: { pageHeader, pageFooter },

    data() {
        return {
            articleList: [],
        };
    },

    mounted() {
        this.loadArticles();
    },

    methods: {
        loadArticles() {
            this.$request.get("api/article").then((response) => {
                this.articleList = response.data.articleList;
            });
        },
        aClick(a) {
            this.$router.push("/article/" + a.id);
        },
    },
};
</script>

<style lang="less" scoped>
.articles {
    .article {
        padding: 20px 0;
        border-bottom: 1px dashed #ddd;

        &:last-child {
            border-bottom: none;
        }

        .title {
            cursor: pointer;
        }

        .summary {
            margin: 17px 0;
            font-size: 15px;
        }

        .info {
            font-size: 13px;
            color: #999;

            span {
                margin-right: 15px;
            }
        }
    }
}
</style>